<template>
  <div id="box">
    <div id="editor" style="margin-top: 20px; opacity: 0.8;"></div>
    <el-button size="mini" style="margin-top: 5px; margin-left: -10%;" @click="submitCom">发表</el-button>
  </div>
</template>

<script>
  // 引入 wangEditor
  import wangEditor from 'wangeditor'
  import hljs from 'highlight.js'
  import {
    submitComment
  } from '@/api/Comment.js'

  export default {
    data() {
      return {
        editor: null,
        editorData: ''
      }
    },
    mounted() {
      const editor = new wangEditor(`#editor`)

      // 配置 onchange 回调函数，将数据同步到 vue 中
      editor.config.onchange = (newHtml) => {
        this.editorData = newHtml
      }

      // 配置菜单栏，删减菜单，调整顺序
      editor.config.menus = [
        'indent',
        'foreColor',
        'link',
        'list',
        'todo',
        'justify',
        'quote',
        'emoticon',
        'image',
        'table',
        'code',
        'splitLine',
        'undo',
        'redo',
      ]

      // editor.config.uploadImgServer = '/upload-img'

      // 设置高度
      editor.config.height = 300
      // 提示文字
      editor.config.placeholder = '说点什么吧'
      // 取消自动focus
      editor.config.focus = false
      // 设置代码高亮
      editor.highlight = hljs

      // 创建编辑器
      editor.create()

      this.editor = editor
    },

    methods: {
      getEditorData() {
        // 通过代码获取编辑器内容
        this.editorData = this.editor.txt.html()
      },

      submitCom() {
        var that = this
        if (that.$store.state.user == null) {
          alert("请先登录")
          return
        }

        var comment = {
          "articleId": that.$store.state.article.id,
          "avatar": that.$store.state.user.avatar,
          "comment": that.editorData,
          "nickName": that.$store.state.user.nickName
        }

        //发送评论请求
        submitComment(comment).then(resp => {

          that.$emit("submitCommentFromEditor", resp)
          that.editor.txt.clear()
          that.$message({
            message: '发表成功',
            type: 'success'
          })

        }).catch(error => {
          console.log(error)
          thar.$router.push('/error')
        })
      }
    },

    beforeDestroy() {
      // 调用销毁 API 对当前编辑器实例进行销毁
      this.editor.destroy()
      this.editor = null
    },

  }
</script>

<style scoped="scoped">
  #box {
    width: 74%;
    margin-left: 8%;
  }

  table {
    border-top: 1px solid #ccc;
    border-left: 1px solid #ccc;
  }

  table td,
  table th {
    border-bottom: 1px solid #ccc;
    border-right: 1px solid #ccc;
    padding: 3px 5px;
  }

  table th {
    border-bottom: 2px solid #ccc;
    text-align: center;
  }

  /* blockquote 样式 */
  blockquote {
    display: block;
    border-left: 8px solid #d0e5f2;
    padding: 5px 10px;
    margin: 10px 0;
    line-height: 1.4;
    font-size: 100%;
    background-color: #f1f1f1;
  }

  /* code 样式 */
  code {
    display: inline-block;
    *display: inline;
    *zoom: 1;
    background-color: #f1f1f1;
    border-radius: 3px;
    padding: 3px 5px;
    margin: 0 3px;
  }

  pre code {
    display: block;
  }

  /* ul ol 样式 */
  ul,
  ol {
    margin: 10px 0 10px 20px;
  }
</style>
